<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';

import { DICT_TYPE } from '@vben/constants';

import { Button, Card } from 'ant-design-vue';

import DictTag from '../../../../components/dict-tag/dict-tag.vue';
import FamilyDepositDetail from './familyDepositDetail.vue';

const props = defineProps<{
  listData: any[];
}>();

const emit = defineEmits<{
  (e: 'edit', item: any): void;
  (e: 'delete', item: any): void;
}>();

function handleEdit(item: any) {
  emit('edit', item);
}

function handleDelete(item: any) {
  emit('delete', item);
}
</script>

<template>
  <div>
    <Card v-for="item in props.listData" :key="item.id" class="mt-4">
      <template #title>
        {{ item.familyName || '未知姓名' }}
        <DictTag
          v-if="item.relation"
          :type="DICT_TYPE.PER_RELATION"
          :value="item.relation"
          class="ml-2"
        />
        <span v-if="item.bankName" class="ml-2 text-sm text-gray-500">
          - {{ item.bankName }}
        </span>
      </template>

      <template #extra>
        <div class="card-actions">
          <Button size="small" type="primary" @click="handleEdit(item)">
            编辑
          </Button>
          <Button size="small" danger @click="handleDelete(item)">
            删除
          </Button>
        </div>
      </template>

      <FamilyDepositDetail :data="item" />
    </Card>
  </div>
</template>

<style scoped>
.card-actions {
  display: flex;
  gap: 8px;
}
</style>
